// lib/features/alphabet/alphabet_page.dart
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:happy_english_learning/features/alphabet/alphabet_detail_page.dart';

class AlphabetPage extends StatefulWidget {
  const AlphabetPage({super.key});

  @override
  State<AlphabetPage> createState() => _AlphabetPageState();
}

class _AlphabetPageState extends State<AlphabetPage> {
  final AudioPlayer _audioPlayer = AudioPlayer();
  final List<String> _letters = List.generate(26, (index) => String.fromCharCode(65 + index));
  final Map<String, String> _letterSounds = Map.fromIterable(
    List.generate(26, (index) => String.fromCharCode('A'.codeUnitAt(0) + index)),
    key: (letter) => letter,
    value: (letter) => 'sounds/letters/${letter.toLowerCase()}.mp3'
  );

  @override
  void dispose() {
    _audioPlayer.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('字母王国'),
        backgroundColor: Colors.blue[200],
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
        ),
      ),
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("assets/backgrounds/alphabet_bg.jpg"),
            fit: BoxFit.cover,
          ),
        ),
        child: GridView.builder(
          padding: const EdgeInsets.all(16),
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            childAspectRatio: 0.9,
            mainAxisSpacing: 15,
            crossAxisSpacing: 15,
          ),
          itemCount: _letters.length,
          itemBuilder: (context, index) => _buildLetterCard(_letters[index]),
        ),
      ),
    );
  }

  Widget _buildLetterCard(String letter) {
    return GestureDetector(
      onTap: () => Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => AlphabetDetailPage(
            letter: letter,
            imagePath: 'assets/letters/${letter.toLowerCase()}_icon.png',
            audioPath: _letterSounds[letter]!,
            phonetic: '', // TODO: 添加字母的音标
            examples: [], // TODO: 添加字母的例子
          ),
        ),
      ),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 200),
        curve: Curves.easeInOut,
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(0.9),
          borderRadius: BorderRadius.circular(20),
          boxShadow: [
            BoxShadow(
              color: Colors.blue.withOpacity(0.3),
              blurRadius: 8,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(
              'assets/letters/${letter.toLowerCase()}_icon.png',
              width: 70,
              height: 70,
            ),
            const SizedBox(height: 10),
            Text(
              letter,
              style: TextStyle(
                fontSize: 32,
                fontWeight: FontWeight.bold,
                color: _getLetterColor(letter),
                fontFamily: 'BalooBhai',
                shadows: [
                  Shadow(
                    color: Colors.black.withOpacity(0.2),
                    blurRadius: 4,
                    offset: const Offset(2, 2),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Color _getLetterColor(String letter) {
    final colors = [
      Colors.redAccent,
      Colors.blueAccent,
      Colors.greenAccent,
      Colors.orangeAccent,
      Colors.purpleAccent,
    ];
    return colors[letter.codeUnitAt(0) % colors.length];
  }

  Future<void> _playLetterSound(String letter) async {
    await _audioPlayer.play(AssetSource(_letterSounds[letter]!));
  }
}